<template>
	<div>
        <h3>我是Message组件</h3>
		<ul>
			<li v-for="m in messageList" :key="m.id">
<!--            两种带有QueryString都可以    -->
				<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">replace查看</button>
			</li>



            <hr>
            <h3>显示Detail组件内容</h3>
            <router-view></router-view>
		</ul>
	</div>
</template>

<script>
	export default {
		name:"Message",
        data() {
            return {
                messageList: [
                    {id:"001", title: "消息001"},
                    {id:"002", title: "消息002"},
                    {id:"003", title: "消息003"},
                ]
            }
        },
        methods: {
		     pushShow(m) {
		          this.$router.push({
                    name: 'xiangqing',
                    params: {
                        id: m.id,
                        title: m.title
                    }
                })
                // console.log(this.$router)
                console.log("@", m)
            },
            replaceShow(m){
                this.$router.replace({
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                })
            }
        }
	}
</script>